Biểu đồ động JavaScript Dynamic / Live hữu ích trong việc hiển thị dữ liệu thay đổi theo thời gian như giá cổ phiếu, nhiệt độ, đọc cảm biến tại thời gian thực… Dynamic Chart còn được biết đến với tên gọi là biểu đồ Real Time. Cập nhật dữ liệu trực tiếp cũng được hỗ trợ trên mọi kiểu biểu đồ/đồ thị bao gồm dạng line, area, column, bar, pie…
Dưới đây là một mẫu biểu đồ cập nhật dữ liệu trực tiếp tại thời gian thực cùng với mã nguồn HTML/JavaScript. Bạn có thể chỉnh sửa nó trong trình duyệt hoặc lưu để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy biến biểu đồ
Bạn có thể thay đổi màu hoặc độ dày của đường nét bằng lineColor và lineThickness. Một số tùy biến khác bao gồm markerSize, markerType, label…
Source: https://quantrimang.com/hoc/code-javascript-tao-mau-bieu-do-thay-doi-du-lieu-tai-thoi-gian-thuc-194616